<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p:first-line {
            color: red;
        }

        .a {

            /* 宽高设为0  边框颜色设为透明色   三角形的朝向跟颜色相对 */

            width: 0;
            height: 0;
            /* border: 20px solid #000;
            border-left-color: red;
            border-right-color: blue;
            border-top-color: yellow; */

            border: 100px solid transparent;
            border-top-color: yellow;
        }


        .s2 {
            display: -webkit-box;   /* 定义旧版弹性盒 */
            -webkit-box-orient: vertical;  /* 方向 horizontal左右 / vertical上下 */
            /* 2行省略    */
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>

    <!-- 
        html标签
            块级标签
            行内标签
            行内块级标签

            置换元素 --- 行内块级元素 （标签和属性共同决定显示效果 img input）

            单标签和双标签

        html5新增的语义化标签

        css
            引入方式

            权重

            选择器
                通配符
                标签
                class
                id
                属性选择器   []
                层级选择器   >  +  ~
                伪类选择器
                    结构性伪类选择器   nth-child    nth-of-type
                    动态伪类选择器   :link  :visited  :hover   :active    :focus
                    UI元素状态伪类选择器   :enabled  :disabled   :checked

            伪元素操作符
                before
                after
                first-letter  第一个文字
                first-line

            属性
                布局属性   
                背景属性
                列表属性
                文本属性  --- 继承性？

                浮动和清除浮动

                定位

                BFC

                自适应三栏布局？？

                css3的属性
                    border-radius
                    opacity
                    box-shadow
                    渐变  linear-gradient / radial-gradient
                    2d、3d转换  transform:scale(缩放)  translate(位移) rotate(旋转) skew(倾斜)
                    transition
                    animation


                    flex相关属性

                        弹性布局中的坑
                            高度默认是继承的   align-items:
                            宽度/高度可能被内容强行撑大  overflow:hidden
                            宽度/高度默认会被挤压  flex-shrink:0


                    多列布局   ----  错位的布局效果
                        column-count
                        column-gap 
                        column-rule 

                        break-inside:avoid   子元素上的
                        

                    grid布局 --- 将来替换flex布局

     -->


    <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    </p>


    <div class="a"></div>

</body>

</html>